<template>
    <div class="enumList">
        <div class="tab" @click="handleEvent(item, index)" v-for="item, index in enumList" :key="index"
            :class="selectIndex == index ? 'choose' : ''">
            <div class="btn">{{ item.label }}</div>
        </div>
    </div>
</template>
<script>
export default {
    components: {},
    props: {
        enumList: {
            type: Array,
            default: () => {
                return [{
                    label: "按钮1",
                    id: 'xxxxxxx'
                },
                {
                    label: "按钮2",
                    id: 'xxxxxxx'
                },
                {
                    label: "按钮3",
                    id: 'xxxxxxx'
                }]
            }
        },
        selectIndex: {
            type: Number,
            default: () => {
                return 0
            }
        }
    },
    data () {
        return {}
    },
    
    mounted () {
    },
    methods: {
        handleEvent (data, index) {
            this.$emit("handleEvent", { data, index })
        },
        iconfont (icon) {
            const reg = /(&#x)?(.*)/
            let iconfontName
            if (reg.test(icon)) {
                iconfontName = reg.exec(icon)[2]
            }
            return String.fromCharCode(parseInt(iconfontName, 16))
        }
    }
};
</script>
<style lang="scss" scoped>
.enumList {
    height: 100%;
    min-height: 50px;
    display: flex;
    justify-content: flex-start;

    .tab {
        padding: 10px 15px;
    }

    .btn {
        border: 1px solid #96c2db;
        color: #0072b4;
        line-height: 30px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 12px;
        transition: all 0.2s;
        border-radius: 4px;
    }

    .choose {
        background-color: #ffffff;

        .btn {
            background-color: #0072b4;
            color: #ffffff;
        }

    }
}
</style>
  